<template>
  <el-container>
    <el-header style="background-color: white;">
      <div class="flex1">
        <div>
          <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane label="待处理" name="second"></el-tab-pane>
            <el-tab-pane label="已处理" name="third"></el-tab-pane>
          </el-tabs>
        </div>
        <div>
          <el-button type="primary" @click="add">添加<i class="el-icon-upload el-icon--right"></i></el-button>

        </div>
      </div>
      <div gutter="12">

      </div>
    </el-header>
    <el-main style="height:750px; padding: 0px 20px;background-color: white;">

      <div class="flex1">
        <div class="flex2">
          <div>
            <span style="margin-right: 5px;">事件类别</span>
            <el-select clearable v-model="selectedValue1" filterable placeholder="请选择">
              <el-option v-for="v in selectedData1" :key="v.id" :label="v.link" :value="v.link">
              </el-option>
            </el-select>

          </div>
          <div>
            <span style="margin-right: 5px;">优先级</span>
            <el-select clearable v-model="selectedValue2" filterable placeholder="请选择">
              <el-option v-for="v in selectedData2" :key="v.id" :label="v.pri" :value="v.pri">
              </el-option>
            </el-select>
          </div>
          <div>
            <span style="margin-right: 5px;">工单状态</span>
            <el-select clearable v-model="selectedValue3" filterable placeholder="请选择">
              <el-option v-for="v in selectedData3" :key="v.id" :label="v.state" :value="v.state">
              </el-option>
            </el-select>
          </div>
        </div>
        <div>
          <el-input clearable v-model="input" placeholder="请输入内容"></el-input>
        </div>
      </div>


      <el-table :data="data.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%"
        :show-header="false">
        <el-table-column prop="name" label="日期">
          <template slot-scope="scope">
            <div style="cursor: pointer;">编码：{{ scope.row.code }}</div>
            <div style="cursor: pointer;">摘要：{{ scope.row.abstract }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="姓名">
          <template slot-scope="scope">
            <div style="cursor: pointer;">工单状态：{{ scope.row.state }}</div>
            <div style="cursor: pointer;">时间：{{ scope.row.data }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="link" label="当前环节">
          <template slot-scope="scope">
            <div style="cursor: pointer;">当前环节：{{ scope.row.link }}</div>
            <div style="cursor: pointer;">处理人：{{ scope.row.user }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="pri" label="优先级">
          <template slot-scope="scope">
            <div style="cursor: pointer;">优先级：{{ scope.row.pri }}</div>
            <div style="cursor: pointer;">类别：{{ scope.row.type }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="edit(scope)" size="small" type="text" width="30">修改</el-button>
            <el-button @click="delet(scope)" size="small" type="text">删除</el-button>
            <el-button @click="handle(scope)" size="small" type="text" v-if="scope.row.state == '未提交'">处理</el-button>
          </template>
        </el-table-column>
      </el-table>


    </el-main>
    <el-footer style="background-color: white;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[8, 10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="data.length">
      </el-pagination>
    </el-footer>
  </el-container>
</template>
<script>


export default {
  components: {


  },

  data() {
    return {
      input: '',
      selectedValue1: '',
      selectedValue2: '',
      selectedValue3: '',
      activeName: '',
      activestate: 'first',
      total: 0,
      currentPage: 1,
      pageSize: 8,

      data: [
      ],
      selectedData1: [
        {
          id: 1,
          link: '用户编辑故障'
        },
        {
          id: 2,
          link: '系统编辑故障'
        }
      ],
      selectedData2: [
        { id: 1, pri: '★' },
        { id: 2, pri: '★★' },
        { id: 3, pri: '★★★' },
        { id: 4, pri: '★★★★' },
        { id: 5, pri: '★★★★★' },
      ],
      selectedData3: [

        { id: 1, state: "未提交" },
        { id: 2, state: "已升级二线" },
        { id: 3, state: "已升级三线" },
        { id: 4, state: "已升级重大故障" },
        { id: 5, state: "已初步评估" },
        { id: 6, state: "已诊断分析" },
        { id: 7, state: "已关闭" },
      ]





    };
  },

  methods: {
    none() {
      this.activestate = 'second'

    },
    done() {
      this.activestate = 'third'

    },
    all() {
      this.activestate = 'first'

    },
    add() {
      this.$router.push('/home/repair/Addproblem');
    },
    handle(scope) {

      this.$store.commit('setA', scope.row.id);
      window.sessionStorage.setItem('id', this.$store.state.a)
      this.$router.push('/home/repair/Handleproblem');
    },
    geteditid() {

    },
    handleSizeChange(v) {

      this.currentPage = 1;
      this.pageSize = v;
    },
    handleCurrentChange(v) {

      this.currentPage = v;
    },
    handleTabClick(tab) {
      if (tab.name === 'first') {
        this.all();
      } else if (tab.name === 'second') {
        this.none();
      } else if (tab.name === 'third') {
        this.done();
      }
      this.selectedValue1 = '';
      this.selectedValue2 = '';
      this.selectedValue3 = '';
      this.currentPage = 1
      this.get()
    },
    get() {
      let json = {};
      if (this.activestate === 'second') {
        json.state = '未提交'
        this.selectedData3 = [
          { id: 2, state: "未提交" }
        ]
      }
      else if (this.activestate === 'third') {
        json.state = [
          "已提交",
          "已升级二线",
          "已升级三线",
          "已升级重大故障",
          "已初步评估",
          "已诊断分析",
          "已关闭"],
          this.selectedData3 = [

            { id: 1, state: "已升级二线" },
            { id: 2, state: "已升级三线" },
            { id: 3, state: "已升级重大故障" },
            { id: 4, state: "已初步评估" },
            { id: 5, state: "已诊断分析" },
            { id: 6, state: "已关闭" },
          ]

      }
      else {
        this.selectedData3 = [
          { id: 1, state: "已提交" },
          { id: 2, state: "未提交" },
          { id: 3, state: "已升级二线" },
          { id: 4, state: "已升级三线" },
          { id: 5, state: "已升级重大故障" },
          { id: 6, state: "已初步评估" },
          { id: 7, state: "已诊断分析" },
          { id: 8, state: "已关闭" },
        ]
      }
      this.selectedValue1 && (json.type = this.selectedValue1);
      this.selectedValue2 && (json.pri = this.selectedValue2)
      this.selectedValue3 && (json.state = this.selectedValue3)
      this.input && (json.code = this.input)
      this.$axios({
        url: '/test',
        method: 'get',
        params: json

      }).then((res) => {
        if (res) {
          this.data = [...res.data]

          /* for (let i = 0; i < res.data.length; i++) {
            this.data.push(res.data[i]);
            console.log(res.data[i]);
          } 为什么这种方法不行见readme*/
        }

      })
    },
    over(scope) {
      this.$axios.patch(`/test/${scope.row.id}`, {

        state: '已修改'
      }).then(() => {
        this.get();
      })


      this.get()
    },
    delet(scope) {
      this.$axios.delete(`/test/${scope.row.id}`, {

      }).then((res) => {
        if (res) {
          alert('删除成功')
          this.currentPage = 1;

          this.get()
        }
      })
    },
    edit(scope) {
      this.$store.commit('setA', scope.row.id);
      this.$router.push('/home/repair/Addproblem');
    }




  },
  mounted() {
    this.selectedValue3 = this.$store.state.goProblem
    this.get()
  },
  beforeDestroy() {
    this.$store.commit('chagngeProblem', '')
  },
  watch: {

    selectedValue1: function () {
      this.get()
      //console.log(this.selectedValue1)
    },
    selectedValue2: function () {
      this.get()
      //console.log(this.selectedValue2)
    },
    selectedValue3: function () {
      this.get()
      //console.log(this.selectedValue3)
    },
    input: function () {
      this.get()
    }
  }

};
</script>

<style scoped>
.el-tabs__nav-wrap::after {
  width: auto;
}

.flex1 {
  display: flex;

  justify-content: space-between;

}

.flex2 {
  display: flex;
  justify-content: left;

}

.settingbutton {
  padding: 0px 0px;
  border: 0px solid;
  margin-left: 5px;
}

::v-deep .el-table tr {
  background-color: #FFF;
  height: 85px;
}

::v-deep .el-pagination {
  padding: 0px 5px;
}

::v-deep .el-select {
  margin-right: 10px;
}
</style>